import { Tag } from 'ant-design-vue';
import dayjs from 'dayjs';
import { h } from 'vue';
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { random } from 'lodash-es';

export const columns: BasicColumn[] = [
  {
    title: '用户名',
    dataIndex: 'account',
    width: 120,
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    width: 120,
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    width: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'createDate',
    width: 180,
    format(text) {
      return dayjs(text).format('YYYY-M-D H:mm:ss');
    },
  },
  {
    title: '角色',
    dataIndex: 'roles',
    width: 200,
    customRender: ({ value }) => {
      const color = ['pink', 'red', 'orange', 'green', 'purple', 'blue', 'cyan'];
      const arr = value.map((item: any) =>
        h(Tag, { color: color[random(0, 6)], title: item.label }, item.label),
      );
      return h('div', arr);
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'nickName',
    label: '昵称',
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const accountFormSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'Id',
    component: 'Input',
    show: false,
  },
  {
    field: 'account',
    label: '用户名',
    component: 'Input',
    rules: [
      {
        required: true,
        message: '请输入用户名',
      },
    ],
    dynamicDisabled: (data) => {
      if (data.values.id) return true;
      return false;
    },
  },
  {
    field: 'mobile',
    label: '手机号',
    component: 'Input',
    rules: [
      {
        required: true,
        message: '请输入手机号',
      },
      {
        type: 'regexp',
        validator: (_, value) => {
          const reg = /^((\+|00)86)?(1[3-9]|9[28])\d{9}$/;
          if (!reg.test(value)) return Promise.reject();
          return Promise.resolve();
        },
        message: '手机号码错误',
      },
    ],
    dynamicDisabled: (data) => {
      if (data.values.id) return true;
      return false;
    },
  },
  {
    field: 'password',
    label: '密码',
    component: 'InputPassword',
    componentProps: { placeholder: '不修改密码请勿填写!' },
    helpMessage: '不修改密码请勿填写任何内容！',
  },
  {
    label: '角色',
    field: 'roles',
    slot: 'roles',
    component: 'Input',
    colProps: { span: 24 },
  },
  {
    field: 'nickName',
    label: '昵称',
    component: 'Input',
    required: true,
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
  },
];
